<template>
  <div class="tab-box">
    <el-scrollbar>
      <chat_tab_item
        v-for="tab in tabs"
        :isAvatar="tab.isAvatar"
        :icon="tab.icon"
        @click="clickTab(tab.name)"
        :isActive="tab.name === activeTabName"
      />
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from "@/store";
const userStore = useUserStore();

const props = defineProps({
  activeTabName: String,
  showMessage: Boolean,
});

onMounted(() => {
  clickTab("chat");
});

const tabs = [
  {
    isAvatar: true,
    icon: userStore.userInfo.avatarUrl,
    name: "avatar",
  },
  {
    icon: "chat-2",
    name: "chat",
  },
  {
    icon: "friend_light",
    name: "friend",
  },
];

const clickTab = (name) => {
  emits("clickTab", name);
};
const emits = defineEmits(["clickTab"]);
</script>

<style scoped lang="scss">
.tab-box {
  height: 100%;
  overflow: hidden;
  border-right: 1px solid #dadbdd;
}
</style>
